<template>
  <video
    ref="videoRef"
    :autoplay="$attrs.autoplay === undefined ? true : $attrs.autoplay as boolean"
    loop="true"
    muted="true"
    playsinline="true"
    webkit-playsinline="true"
    mtt-playsinline="true"
    raw-controls=""
    disablepictureinpicture=""
    style="object-fit: cover;"
    :src="src"
    @canplay="autoplay"
  ></video>
</template>

<script lang="ts" setup name="cover-video">
import { ref, useAttrs } from 'vue'
defineProps({
  src: {
    type: String,
    default: ''
  }
})
const attrs = useAttrs()
const videoRef = ref<HTMLVideoElement>(null)
const autoplay = () => {
  if (attrs.autoplay || attrs.autoplay === undefined) {
    videoRef.value.play();   
  }
}

defineExpose({
  play: (replay?: boolean) => {
    if (replay) {
      videoRef.value.currentTime = 0;
    }
    videoRef.value.play()
  },
  pause: (currentTime?: number) => {
    if (currentTime !== undefined) {
      videoRef.value.currentTime = currentTime;
    }
    videoRef.value.pause()
  }
})
</script>